<template>
  <div class="member ">
    <el-scrollbar :height="100 + 'vh'">
      <div class="inner" v-show="packagePay">
        <div class="title">
          {{ packagePay ? '我的账号' : '会员套餐' }}
        </div>
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <div class="user-profile">
              <user-profile :user="userProData" @upDataPass="showPasswordDialog = true"
                @upDataAccount="showBindMobileDialog = true" @save="getUserData" />

              <!-- <el-row class="user-opt" :gutter="20">
              <el-col :span="12">
                <el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销
                </el-button>
              </el-col>

              <el-col :span="24" style="padding-top: 30px">
                <el-button type="danger" round @click="logout">退出登录</el-button>
              </el-col>
            </el-row> -->
            </div>
          </el-col>

          <el-col :span="15">
            <div class="product-box">
              <!-- <div
                style="border: 1px solid #F4F5F7;border-radius: 16px; width: 100%;box-sizing: border-box;padding: 10px;margin: 10px;">
                <div style="display: flex;justify-content: space-between;align-items: center;color: #000;">
                  <h3 style="margin: 0;">免费版</h3>
                  <el-button type="primary" @click="router.push('/member?status=Pay')">购买套餐</el-button>
                </div>
                <p>免费版用户15天无任何使用记录时，系统会自动清理账号知识库。</p>
                <p>到期时间：2024/04/01 00:00:00</p>
              </div> -->
              <div
                style="border: 1px solid #F4F5F7;border-radius: 16px; width: 100%;box-sizing: border-box;padding: 10px;margin: 10px;height: 290px;display: flex; flex-direction: column;justify-content: space-between;">
                <div style="display: flex;align-items: center;color: #000;justify-content: space-between;">
                  <h3 style="margin: 0;">用量</h3>
                  <el-button type="primary" v-if="isVip" @click="router.push('/member?status=Pay')">购买套餐</el-button>

                </div>
                <p>剩余对话次数：{{ user.calls }}</p>
                <p>本月消耗电量：{{ user.token }}</p>
                <p>累计消耗电量：{{ user.total_tokens }}</p>
                <!-- <p>{{ user }}</p> -->
              </div>




              <!-- <ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240">
              <template #default="scope">
                <div class="product-item" :style="{width: scope.width+'px'}">
                  <div class="image-container">
                    <el-image :src="vipImg" fit="cover"/>
                  </div>
                  <div class="product-title">
                    <span class="name">{{ scope.item.name }}</span>
                  </div>
                  <div class="product-info">
                    <div class="info-line">
                      <span class="label">商品原价：</span>
                      <span class="price">￥{{ scope.item.price }}</span>
                    </div>
                    <div class="info-line">
                      <span class="label">促销立减：</span>
                      <span class="price">￥{{ scope.item.discount }}</span>
                    </div>
                    <div class="info-line">
                      <span class="label">有效期：</span>
                      <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
                      <span class="expire" v-else>长期有效</span>
                    </div>
                    <div class="pay-way">
                      <el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
                        <i class="iconfont icon-alipay"></i> 支付宝
                      </el-button>
                      <el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
                        <span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
                        <span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
                      </el-button>

                      <el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
                        <span><i class="iconfont icon-wechat-pay"></i> 微信</span>
                      </el-button>
                    </div>
                  </div>
                </div>
              </template>
</ItemList> -->

              <!-- <h2 class="headline">消费账单</h2>

            <div class="user-order">
              <user-order v-if="isLogin"/>
            </div> -->
            </div>
          </el-col>
        </el-row>

      </div>
      <div v-show="!packagePay" class="innerPay">
        <h3>会员套餐</h3>
        <div class="info" v-if="orderPayInfoText !== ''">
          <el-alert type="info" show-icon :closable="false" effect="dark">
            <strong>说明:</strong> {{ orderPayInfoText }}
          </el-alert>
        </div>

        <ItemList :items="list" v-if="list.length > 0" :gap="30" :isSize="packagePay">
          <template #default="scope">
            <div class="product-item" :style="{ width: scope.width + 'px' }">
              <div class="image-container">
                <el-image :src="vipImg" fit="cover" />
              </div>
              <div class="product-title">
                <span class="name">{{ scope.item.name }}</span>
              </div>
              <div style="font-size: 22px;">
                {{ (scope.item.price - scope.item.discount).toFixed(2) }}<span
                  style="vertical-align: sub;font-size: 10px;">元</span>
              </div>
              <div class="product-info">
                <div class="info-line">
                  <span class="label" style="text-decoration: line-through;">原价：{{ scope.item.price }}元</span>
                  <!-- <span class="price">￥{{ scope.item.price }}</span> -->
                </div>
                <!-- <div class="info-line">
                <span class="label">促销立减：</span>
                <span class="price">￥{{ scope.item.discount }}</span>
              </div> -->
                <div class="info-line">
                  <span class="label">有效期：{{ scope.item.days > 0 ? scope.item.days + '天' : '永久' }}</span>
                  <!-- <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
                <span class="expire" v-else>长期有效</span> -->
                </div>
                <div class="pay-way">
                  <!-- <el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
                    <i class="iconfont icon-alipay"></i> 支付宝
                  </el-button> -->

                  <el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
                    <span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
                    <span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
                  </el-button>

                  <el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
                    <span><i class="iconfont icon-wechat-pay"></i> 微信</span>
                  </el-button>
                </div>
              </div>
              <el-button type="primary" @click="alipay(scope.item)" v-if="payWays['alipay']" style="width: 100%;">
                立即购买
              </el-button>
            </div>

          </template>
        </ItemList>
        <h3 class="headline">消费账单</h3>

        <div class="user-order">
          <user-order v-if="isLogin" />
        </div>
      </div>
    </el-scrollbar>

    <login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" />

    <password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false" @logout="logout" />

    <bind-mobile v-if="isLogin" :show="showBindMobileDialog" :username="user.username"
      @hide="showBindMobileDialog = false" />

    <reward-verify v-if="isLogin" :show="showRewardVerifyDialog" @hide="showRewardVerifyDialog = false" />

    <!-- <el-dialog v-model="showRewardDialog" :show-close="true" width="400px" title="参与众筹">
      <el-alert type="info" :closable="false">
        <div style="font-size: 14px">您好，众筹 9.9元，就可以兑换 100 次对话，以此来覆盖我们的 OpenAI
          账单和服务器的费用。<strong style="color: #f56c6c">由于本人没有开通微信支付，付款后请凭借转账单号,点击【众筹核销】按钮手动核销。</strong>
        </div>
      </el-alert>
      <div style="text-align: center;padding-top: 10px;">
        <el-image v-if="enableReward" :src="rewardImg" />
      </div>
    </el-dialog> -->

    <el-dialog v-model="showPayDialog" :close-on-click-modal="false" :show-close="true" :width="400" @close="closeOrder"
      title="充值订单支付">
      <div class="pay-container">
        <div class="count-down">
          <count-down :second="orderTimeout" @timeout="refreshPayCode" ref="countDownRef" />
        </div>

        <div class="pay-qrcode" v-loading="loading">
          <el-image :src="qrcode" />
        </div>

        <div class="tip success" v-if="text !== ''">
          <el-icon>
            <SuccessFilled />
          </el-icon>
          <span class="text">{{ text }}</span>
        </div>
        <div class="tip" v-else>
          <el-icon>
            <InfoFilled />
          </el-icon>
          <span class="text">请打开手机{{ payName }}扫码支付</span>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script setup>

import { onMounted, ref, watch } from "vue"
import { ElMessage } from "element-plus";
import { httpGet, httpPost } from "@/utils/http";
import ItemList from "@/components/ItemList.vue";
import { InfoFilled, SuccessFilled } from "@element-plus/icons-vue";
import LoginDialog from "@/components/LoginDialog.vue";
import { checkSession } from "@/action/session";
import UserProfile from "@/components/UserProfile.vue";
import PasswordDialog from "@/components/PasswordDialog.vue";
import BindMobile from "@/components/ResetAccount.vue";
import RewardVerify from "@/components/RewardVerify.vue";
import { useRoute, useRouter } from "vue-router";
import { removeUserToken } from "@/store/session";
import UserOrder from "@/components/UserOrder.vue";
import CountDown from "@/components/CountDown.vue";

const listBoxHeight = ref(0)
const list = ref([])
const showLoginDialog = ref(false)
const showPayDialog = ref(false)
const vipImg = ref("/images/taocan.png")
const enableReward = ref(false) // 是否启用众筹功能
const rewardImg = ref('/images/reward.png')
const qrcode = ref("")
const showPasswordDialog = ref(false);
const showBindMobileDialog = ref(false);
const showRewardDialog = ref(false);
const showRewardVerifyDialog = ref(false);
const text = ref("")
const user = ref({})
const isLogin = ref(false)
const router = useRouter()
const route = useRoute()
const curPayProduct = ref(null)
const activeOrderNo = ref("")
const countDownRef = ref(null)
const orderTimeout = ref(1800)
const loading = ref(true)
const orderPayInfoText = ref("")
const packagePay = ref(true)
const userProData = ref({})
const payWays = ref({})
const payName = ref("支付宝")
const curPay = ref("alipay") // 当前支付方式
const isVip = ref(false) //是否开启vip



watch(() => route.query.status, (newValue, oldValue) => {
  packagePay.value = newValue === 'Info' ? true : false
}, {
  immediate: true
})

onMounted(() => {
  // listBoxHeight.value = window.innerHeight
  // window.onresize = () => {
  //   console.log('-=-=-=-=-=-=-=-=')
  //   listBoxHeight.value = window.innerHeight
  // }
  checkSession().then(_user => {
    user.value = _user
    // console.log(_user)
    isLogin.value = true
    getUserData()
    httpGet("/api/product/list").then((res) => {
      list.value = res.data
    }).catch(e => {
      ElMessage.error("获取产品套餐失败：" + e.message)
    })
  }).catch(() => {
    router.push("/login")
  })

  httpGet("/api/admin/config/get?key=system").then(res => {
    rewardImg.value = res.data['reward_img']
    enableReward.value = res.data['enabled_reward']
    orderPayInfoText.value = res.data['order_pay_info_text']
    isVip.value = res.data['member']
    if (res.data['order_pay_timeout'] > 0) {
      orderTimeout.value = res.data['order_pay_timeout']
    }
  }).catch(e => {
    ElMessage.error("获取系统配置失败：" + e.message)
  })

  httpGet("/api/payment/payWays").then(res => {
    payWays.value = res.data
  }).catch(e => {
    ElMessage.error("获取支付方式失败：" + e.message)
  })
})
const getUserData = () => {
  // 获取最新用户信息
  httpGet('/api/user/profile').then(res => {
    userProData.value = res.data
  }).catch(e => {
    ElMessage.error("获取用户信息失败：" + e.message)
  });
}

// refresh payment qrcode
const refreshPayCode = () => {
  if (curPay.value === 'alipay') {
    alipay()
  } else if (curPay.value === 'hupi') {
    huPiPay()
  }
}

const genPayQrcode = () => {
  loading.value = true
  text.value = ""
  httpPost("/api/payment/qrcode", {
    pay_way: curPay.value,
    product_id: curPayProduct.value.id,
    user_id: user.value.id
  }).then(res => {
    showPayDialog.value = true
    qrcode.value = res.data['image']
    activeOrderNo.value = res.data['order_no']
    queryOrder(activeOrderNo.value)
    loading.value = false
    // 重置计数器
    if (countDownRef.value) {
      countDownRef.value.resetTimer()
    }
  }).catch(e => {
    ElMessage.error("生成支付订单失败：" + e.message)
  })
}

const alipay = (row) => {
  payName.value = "支付宝"
  curPay.value = "alipay"
  if (!user.value.id) {
    showLoginDialog.value = true
    return
  }
  if (row) {
    curPayProduct.value = row
  }
  genPayQrcode()
}

// 虎皮椒支付
const huPiPay = (row) => {
  payName.value = payWays.value["hupi"]["name"] === "wechat" ? '微信' : '支付宝'
  curPay.value = "hupi"
  if (!user.value.id) {
    showLoginDialog.value = true
    return
  }
  if (row) {
    curPayProduct.value = row
  }
  genPayQrcode()
}

// PayJS 支付
const PayJs = (row) => {
  payName.value = '微信'
  curPay.value = "payjs"
  if (!user.value.id) {
    showLoginDialog.value = true
    return
  }
  if (row) {
    curPayProduct.value = row
  }
  genPayQrcode()
}

const queryOrder = (orderNo) => {
  httpPost("/api/payment/query", { order_no: orderNo }).then(res => {
    if (res.data.status === 1) {
      text.value = "扫码成功，请在手机上进行支付！"
      queryOrder(orderNo)
    } else if (res.data.status === 2) {
      text.value = "支付成功，正在刷新页面"
      if (curPay.value === "payjs") {
        setTimeout(() => location.reload(), 3000)
      } else {
        setTimeout(() => location.reload(), 500)
      }
    } else {
      // 如果当前订单没有过期，继续等待订单的下一个状态
      if (activeOrderNo.value === orderNo) {
        queryOrder(orderNo)
      }
    }
  }).catch(e => {
    ElMessage.error("查询支付状态失败：" + e.message)
  })
}

const logout = function () {
  httpGet('/api/user/logout').then(() => {
    removeUserToken();
    router.push('/login');
  }).catch(() => {
    ElMessage.error('注销失败！');
  })
}

const closeOrder = () => {
  activeOrderNo.value = ''
}

</script>

<style lang="stylus">
@import "@/assets/css/custom-scroll.styl"
.member {
  background-color: #F7F8FA;
  min-width 1080px
  height 100%

  .el-dialog {
    .el-dialog__body {
      padding-top 10px

      .pay-container {
        .count-down {
          display flex
          justify-content center
        }

        .pay-qrcode {
          display flex
          justify-content center

          .el-image {
            width 360px;
            height 360px;
          }
        }

        .tip {
          display flex
          justify-content center

          .el-icon {
            font-size 24px
          }

          .text {
            font-size: 16px
            margin-left 10px
          }
        }

        .tip.success {
          color #07c160
        }
      }
    }
  }

  .title {
    // text-align center
    // background-color #F7F8FA
    font-size 20px
    color #ffffff
    padding 10px
    border-bottom 1px solid #F7F8FA
    color #000
  }

  .innerPay{
    background-color #fff
    padding 10px 20px
    box-sizing: border-box
    border-radius 26px
    margin 10px 
    // height calc(100% - 40px)
  }

  .inner {
    color #ffffff
    box-sizing: border-box;
    padding 15px 0 15px 15px;
    overflow-x hidden
    overflow-y visible
    background-color #fff
    margin 10px 
    border-radius 26px
    .user-profile {
      padding 10px 20px 20px 20px
      // background-color #393F4A
      color #000
      border-radius 10px
      // height 100vh

      .el-form-item__label {
        color #000
        justify-content start
      }

      .user-opt {
        .el-col {
          padding 10px

          .el-button {
            width 100%
          }
        }
      }
    }


    .product-box {
      color #8D94AA
      .info {
        .el-alert__description {
          font-size 14px !important
          margin 0
        }
        padding 10px 20px 20px 0
      }


        
      

      .headline {
        padding 0 20px 20px 0
      }

      .user-order {
        padding 0 20px 20px 0
      }
    }
  }

}

.product-item {
          // border 1px solid #666666
          border-radius 6px
          // cursor pointer
          // transition: all 0.3s ease; /* 添加过渡效果 */
          display flex
          flex-direction column
          justify-content center
          align-items center
          position relative
          // margin-top 20px

          .image-container {
            display flex
            justify-content center
            position:absolute
            top -60px

            .el-image {
              padding 6px

              .el-image__inner {
                border-radius 10px
              }
            }
          }

          .product-title {
            margin-top 60px
            display flex
            padding 10px

            .name {
              width 100%
              text-align center
              font-size 16px
              font-weight bold
              background: #3360FF;
              background: repeating-linear-gradient(to right, #3360FF 0%, #33DAFF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              // linear-gradient(316deg,#5efce8,#736efe)
            }
          }

          .product-info {
            padding 10px 20px
            font-size 14px
            color #999999

            .info-line {
              display flex
              width 100%
              padding 5px 0

              .label {
                display flex
                width 100%
              }

              .price, .expire {
                display flex
                width 90px
                justify-content right
              }

              .price {
                color #f56c6c
              }

              .expire {
                color #409eff
              }
            }


            .pay-way {
              padding 10px 0
              display flex
              justify-content: space-between

              .iconfont {
                margin-right 5px
              }
            }
          }

          // &:hover {
          //   box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
          //   transform: translateY(-10px); /* 向上移动10像素 */
          // }
        }
</style>
